import React, { Component } from 'react'
import StudentTitle from './components/StudentTitle'
import AddStudent from './components/AddStudent'
import StudentList from './components/StudentList'

class App extends Component {

  state = {
    studentList: []
  }

  // 定义方法处理studentList的状态
  addList = (student, callback) => {
    let studentList = [...this.state.studentList, student]
    this.setState({studentList}, () => {
      callback()
    })
  }

  // 定义数据删除
  removeStudent = (number) => {
    console.log('执行删除', number)
    const studentList = JSON.parse(JSON.stringify(this.state.studentList))
    // 深拷贝元数据
    const index = studentList.findIndex(student => student.number === number)
    console.log(index)
    studentList.splice(index, 1)
    this.setState({studentList})
  }

  render() {
    return (
      <div className='container'>
        <StudentTitle/>
        <div class="row">
          <div class="col-md-6"><AddStudent addList={this.addList}/></div>
          <div class="col-md-6"><StudentList studentList={this.state.studentList} removeStudent={this.removeStudent}/></div>
        </div>
      </div>
    );
  }
}

export default App;
